import React from "react";
import { Checkbox } from 'antd';
import { Radio } from 'antd';
import "./index.css";
// 模拟考试试题选择
export default class  extends React.Component{
    constructor(props){
        super();
        let needBGColor=true;
        if(props.needBGColor!==undefined&&props.needBGColor!==null){
            needBGColor=props.needBGColor;
        }
        this.state={
            type:props.type,//类型,单选、多选
            number:props.number,//题号
            question:props.question,//问题
            answers:props.answers,//答案数据数组
            change:props.change,//选中项发生变化的回调函数
            selectedValue:(props.type==="checkbox")?props.selectedValue.toString():props.selectedValue,//默认选中的值

            isDisabled:props.isDisabled,//是否禁用

            needBGColor:needBGColor
        }
       
    }

    UNSAFE_componentWillReceiveProps(props){
        // console.log(props.number)

        // console.log(props.selectedValue)
        let needBGColor=true;
        if(props.needBGColor!==undefined&&props.needBGColor!==null){
            needBGColor=props.needBGColor;
        }
        this.setState({
            type:props.type,//类型,单选、多选
            number:props.number,//题号
            question:props.question,//问题
            answers:props.answers,//答案数据数组
            change:props.change,//选中项发生变化的回调函数
            selectedValue:(props.type==="checkbox")?props.selectedValue.toString():props.selectedValue,//默认选中的值

            isDisabled:props.isDisabled,//是否禁用

            needBGColor:needBGColor
        });
    }

    CheckBoxChange(value){
        // console.log(value.toString());
        this.setState({
            selectedValue:value.toString()
        });
        this.ChangeCallBack({number:this.state.number,value});
    }
    RadioChange(e){
        // console.log(e.target.value)
        this.setState({
            selectedValue:e.target.value
        });
        this.ChangeCallBack({number:this.state.number,value:e.target.value});
    }
    ChangeCallBack(value){
        if(this.state.change!==undefined && this.state.change!==null){
            this.props.change(value);
        }
    }
    
    render(){
        //所有选项
        let answers=[];
        
        let index=0;
        let selectType="";
        let result="";
        switch(this.state.type){
            case "radio":
                selectType="单选题";
                this.state.answers.forEach(i => {
                    answers.push(
                    <div className="QuestingSelecter_Answer_Item" key={index++}>
                        <Radio disabled={this.state.isDisabled}  value={i.key}>{i.key}. {i.value}</Radio>
                    </div>)
                });
                result=(
                    <div className="QuestingSelecter_Answer">
                        <Radio.Group onChange={e=>this.RadioChange(e)} value={this.state.selectedValue}>
                            {answers}
                        </Radio.Group>
                    </div>
                );
                break;
            case "checkbox":
                selectType="多选题";
                this.state.answers.forEach(i=>{
                    answers.push(<div  className="QuestingSelecter_Answer_Item" key={index++}>
                        <Checkbox disabled={this.state.isDisabled}  value={i.key}>{i.key}. {i.value}</Checkbox>
                    </div>)
                });
                result=(
                    <div className="QuestingSelecter_Answer">
                        <Checkbox.Group onChange={e=>this.CheckBoxChange(e)} value={this.state.selectedValue}>
                            {answers}
                        </Checkbox.Group>
                    </div>
                )
                break;
            default:
                break;
        }
        return(
            <div className={this.state.needBGColor===true?"QuestingSelecter_Container":"QuestingSelecter_Container_NoBG"}>
                <div className="QuestingSelecter_Left">
                    {this.state.number}、
                </div>
                <div className="QuestingSelecter_Right">
                    <div>
                        <span className="QuestingSelecter_SelectType">
                            ({selectType})
                        </span>
                        <span>
                            
                        </span>
                        <span className="QuestingSelecter_Question">
                            {this.state.question}(<span className="QuestingSelecter_SelectItems">{this.state.selectedValue}</span>)
                        </span>
                    </div>
                    <div>
                        {result}
                    </div>
                </div>
            </div>
        )
    }
}